<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .Box {
            margin-top: 350px;
            width: 1756px;
            height: 118px;
            background-color: green;
        }

        .Bear {
            position: relative;
            top: 9px;
            width: 200px;
            height: 100px;
            background: url(https://img.haruka.net.cn/image/2024/10/24/i8xj1b-0.png) 0 0 no-repeat;
            animation: BearRun 1s steps(8) infinite;
        }

        .BearBox {
            width: 200px;
            height: 118px;
            animation: BearBoxRun 5s infinite;
        }

        @keyframes BearRun {
            0% {}

            100% {
                background-position: -1600px 0;
            }
        }

        @keyframes BearBoxRun {
            0% {}

            25% {
                transform: translateX(0px);
            }

            80% {
                transform: translateX(1500px);
            }

            100% {
                transform: translateX(1756px);
            }
        }
    </style>
</head>

<body>
    <div class="Box">
        <div class="BearBox">
            <div class="Bear"></div>
        </div>
    </div>
</body>

</html>